<script setup>
import {formatDay, formatTime} from '@/utils/date.js'
import {ref, onMounted, getCurrentInstance} from "vue";
import { ElMessage } from 'element-plus'
import loginUser from '@/stores/LoginUser.js'
import UnamePwd from "@/stores/UnamePwd.js";
import router from "@/router/index.js";
import api from '@/utils/request.js';
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();

// 修改1：使用正确的字段名
let userModel = ref({
  ...loginUser().userModel,
  // 使用正确的头像字段
  headImg: loginUser().userModel.avatarUrl,
  // 使用正确的时间字段
  regTime: loginUser().userModel.createTime,
  loginTime: loginUser().userModel.lastLoginTime
});

let userForm = ref({
  nickname: loginUser().userModel.nickname,
  email: loginUser().userModel.email,
  phone: loginUser().userModel.phone,
});

let passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

onMounted(() => {
  // 确保使用正确的字段
  userModel.value = {
    ...userModel.value,
    headImg: loginUser().userModel.avatarUrl,
    regTime: loginUser().userModel.createTime,
    loginTime: loginUser().userModel.lastLoginTime
  };
});

const onSubmit = () => {

  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      api.postJson("/admin/user/upload/info", userForm.value).then(result => {
        if (result.code === 200) {
          // 更新store中的用户信息
          const store = loginUser();
          store.userModel.nickname = userForm.value.nickname;
          store.userModel.email = userForm.value.email;
          store.userModel.phone = userForm.value.phone;

          ElMessage.success("更新成功")
        } else if (result.code === 1003) {
          router.push("/login")
        } else {
          ElMessage.error(result.msg)
        }
      })
    }
  })
}

const submitPassword = () => {
  console.log("修改密码")
  if(passwordForm.value.confirmPassword != passwordForm.value.newPassword){
    ElMessage.error("新密码和确认密码不一致")
    return; // 添加返回，避免继续执行
  }

  // 获取密码表单引用并进行验证
  proxy.$refs.passwordFormRef.validate(valid => {
    if (valid) {
      // 添加修改密码的请求
      api.postJson("/admin/user/updatePwd", {
        oldPassword: passwordForm.value.oldPassword,
        newPassword: passwordForm.value.newPassword
      })
          .then(response => {
            if (response.code === 200) {
              ElMessage.success('密码修改成功');
              // 清空表单
              passwordForm.value = {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
              };
            } else {
              ElMessage.error(response.data.msg || '密码修改失败');
            }
          })
          .catch(error => {
            ElMessage.error('请求失败: ' + error.message);
          });
    }
  });
};


const handleAvatarSuccess = (result, file) => {
  if (result.code === 200) {
    ElMessage.success('上传成功')
    // 修改2：更新正确的头像字段
    loginUser().userModel.avatarUrl = result.data;
    userModel.value.headImg = result.data;
  } else if (result.code === 1003) {
    router.push("/login")
  } else {
    ElMessage.error('上传失败')
  }
}

const onFileChange = (file) => {
  if (!file) return
  if (!/^image\/(jpeg|png|gif)$/.test(file.type)) {
    ElMessage.error('仅支持JPG/PNG/GIF格式')
    return false
  }
  return true
}

// 表单验证规则保持不变...
const activeName = ref('first')
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        <div class="text-center">
          <el-upload
              class="avatar-uploader"
              :action="baseUrl+'/login/doUploadPic'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="onFileChange"
          >
            <!-- 修改3：使用正确的头像字段 -->
            <img v-if="userModel.headImg" :src="userModel.headImg" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
        <ul class="list-group list-group-striped">
          <li class="list-group-item">
            <el-icon><User /></el-icon>
            <span>用户名称</span>
            <div class="pull-right">{{ userModel.username }}</div>
          </li>
          <li class="list-group-item">
            <el-icon><UserFilled /></el-icon>
            <span>角色名称</span>
            <!-- 修改4：正确显示角色信息 -->
            <div class="pull-right">{{ userModel.role?.roleName || '无角色' }}</div>
          </li>
          <li class="list-group-item">
            <el-icon><UserFilled /></el-icon>
            <span>角色描述</span>
            <div class="pull-right">{{ userModel.role?.description || '无描述' }}</div>
          </li>
          <li class="list-group-item">
            <el-icon><Timer /></el-icon>
            <span>创建日期</span>
            <!-- 修改5：使用正确的时间字段 -->
            <div class="pull-right">{{ userModel.regTime ? formatDay(userModel.regTime) : '无记录' }}</div>
          </li>
          <li class="list-group-item">
            <el-icon><ChromeFilled /></el-icon>
            <span>最后登录时间</span>
            <!-- 修改6：使用正确的时间字段 -->
            <div class="pull-right">{{ userModel.loginTime ? formatDay(userModel.loginTime) : '无记录' }}</div>
          </li>
        </ul>
      </el-card>
    </el-col>

    <el-col :span="16">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>基本资料</span>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeName" class="demo-tabs">
              <el-tab-pane label="基本资料" name="first">
                <el-form ref="formRef" :model="userForm" label-width="auto" style="max-width: 600px" :rules="userInfoRules">
                  <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="userForm.nickname" />
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email" />
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userForm.phone" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button type="danger" @click="router.push('/index')">关闭</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="修改密码" name="second">
                <el-form ref="passwordFormRef" :model="passwordForm" label-width="auto" style="max-width: 600px" :rules="passwordRules">
                  <el-form-item label="旧密码" prop="oldPassword">
                    <el-input
                        v-model="passwordForm.oldPassword"
                        type="password"
                        placeholder="请输入旧密码"
                        show-password
                    />
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword">
                    <el-input
                        v-model="passwordForm.newPassword"
                        type="password"
                        placeholder="请输入新密码"
                        show-password
                    />
                  </el-form-item>
                  <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input
                        v-model="passwordForm.confirmPassword"
                        type="password"
                        placeholder="请确认新密码"
                        show-password
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitPassword">保存</el-button>
                    <el-button type="danger" @click="router.push('/index')">关闭</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>


<style scoped>
.avatar-uploader {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.hover-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader:hover .hover-mask {
  opacity: 1;
}

.upload-icon {
  color: white;
  font-weight: bold;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.list-group {
  padding-left: 0;
  list-style: none;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

.list-group-striped>.list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}
.pull-right {
  float: right !important;
}
</style>